<template>
    <transition
            name="tran_rank"
            enter-active-class="animated fadeIn"
            leave-active-class="animated fadeOut"
    >
        <div class="date" v-if="show">
            <el-card class="box-card">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="随笔归档 Pigeonhole" name="1">
                    <div v-for="date in dates" >
                        <a class="date-items" v-on:click="sendDate(date.date,date.time)" href="javascript:void(0)">{{date.time}}{{'('+date.count+')'}}</a>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="随笔分类 Classification" name="2">
                    <div v-for="cate in cates">
                        <a class="cate-items" v-on:click="sendCate(cate.name)" href="javascript:void(0)">{{cate.name}}<i class="header-icon el-icon-info"></i></a>
                    </div>
                </el-collapse-item>
            </el-collapse>
            </el-card>
        </div>
    </transition>
</template>

<script>
    import {log} from '@/assets/js/util.js'
    export default{
        props:['bus'],
        name: 'date',
        data () {
            return {
                msg: 'date',
                show:false,
                activeNames:'',
                dates:[],
                cates:[],
            }
        },
        methods:{
            init:function () {
                var url = server_url+'/api/cates'
                this.$http.jsonp(url, {}, {
                    headers: {},
                    emulateJSON: true
                }).then(function(response) {
                    var data = response.data.data
                    this.dates = data[0]
                    this.cates = data[1]
                    log(data)
                    this.show = true
                }, function(response) {
                    log(response)
                });
            },
            sendDate:function (date,cdate) {
                this.bus.$emit('sendDate', date)
                this.bus.$emit('sendBread',[cdate+'的文章'])
            },
            sendCate:function (cate) {
                this.bus.$emit('sendCate',cate)
                this.bus.$emit('sendBread',['"'+cate+'"分类下的文章'])
            }
        },
        mounted:function () {
            this.init()
        }
    }
</script>

<style>
    .date{
        margin-top: 10px;
    }
    .date-items{
        text-decoration: none;
        color:#409eff;
    }
    .cate-items{
        text-decoration: none;
        color:#409eff;
    }
</style>